<template>
  <div>
    <div v-show="status==1">
      <ul class="ul_info span_color">
        <li><span>姓名</span><label>{{utils.replaceName(data.aac003)}}</label></li>
        <li><span>身份证号</span><label>{{utils.replaceCard(data.aac002)}}</label></li>
      </ul>
      <ul class="ul_info">
         <li><span>经办机构</span><input type="text" class="in_select" v-model="data.lkfsStr" placeholder="请选择经办机构" readonly
                                    @click="selItem('请选择经办机构','lkfs')" unselectable="on" onfocus="this.blur()"/></li>
        <li><span>单位/村/社区</span><input type="text" class="in_select" v-model="data.fkwdStr" placeholder="请选择" readonly
                                    @click="selItem('请选择','fkwd')" unselectable="on" onfocus="this.blur()"/></li>
      </ul>
      <ul class="ul_info">
        <li><span>户口性质</span><input type="tel" v-model="data.cellphone" maxlength="11" placeholder="请输入户口性质"/></li>
        <li><span>户口所在地</span><input type="text" v-model="data.aae010" placeholder="请输入户口所在地"/></li>
        <li><span>民族</span><input type="text" class="in_select" v-model="data.lkfsStr" placeholder="请选择领卡方式" readonly
                                    @click="selItem('请选择民族','lkfs')" unselectable="on" onfocus="this.blur()"/></li>
        <li><span>手机号码</span><input type="tel" v-model="data.cellphone1" maxlength="11" placeholder="请输入手机号码"/></li>
        <li><span>联系地址</span><input type="text" v-model="data.aae0101" placeholder="请输入联系地址"/></li>
        <li><span>邮编</span><input type="text" v-model="data.aac0031" placeholder="请输入邮编"/></li>
        <li><span>身份证有效期限</span><input type="text" v-model="data.aac0031" placeholder="请输入身份证有效期限"/></li>
      </ul>
      <div class="photo">
        <p>照片上传</p>
        <i @click="openImg" id="upload"><img src="../../assets/add_photo.png"/></i>
        <div>提示：16岁以下需要上传户口本，16岁以上上传身份证正反面照片。</div>
        <input ref="upimg" type="file" @change="imgChange" accept="image/*" style="display: none;"/>
      </div>
      <div class="btn_sub" @click="saveAll">提  交</div>
    </div>
    <div v-show="status==2" class="success">
      <i><img src="../../assets/images/icon-success.png"/></i>
      <label>经办机构将于3个工作日内完成审核。</label>
      <span>返回首页</span>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        code: 9999,
        status: 1,
        data: {},
        selData: {
          "lkfs": [{"code": "1", "name": "网点领卡"}, {"code": "2", "name": "快递方式"}],
          "fkwd": [
            {"code": "320583002", "name": "高新区网点"},
            {"code": "320583004", "name": "开发区青阳路网点"},
            {"code": "320583005", "name": "开发区利得国际网点"},
            {"code": "320583006", "name": "开发区蓬朗网点"},
            {"code": "320583007", "name": "巴城网点"},
            {"code": "320583008", "name": "周市网点"},
            {"code": "320583009", "name": "张浦网点"},
            {"code": "320583010", "name": "陆家网点"},
            {"code": "320583011", "name": "花桥网点"},
            {"code": "320583012", "name": "锦溪网点"},
            {"code": "320583013", "name": "千灯网点"},
            {"code": "320583014", "name": "淀山湖网点"},
            {"code": "320583015", "name": "周庄网点"},
            {"code": "320583016", "name": "政务中心网点"}
          ],
        },
        age: 0
      }
    },
    created() {
      let info = sessionStorage.getItem("userInfo");
      if (info) {
        info = JSON.parse(info);
        let sexNum = info.certnum.substring(16, 17);
        let sex = sexNum % 2;
        this.data.aac003 = info.name;
        this.data.aac299 = "CHN";
        this.data.eac109 = "01";
        this.data.aac002 = info.certnum;
        if (sex == 0) {
          this.data.aac004 = 2;
        } else {
          this.data.aac004 = 1;
        }
        this.data.baz838 = "0009";
        let sr = info.certnum.substring(6, 10);
        let date = new Date();
        this.age = date.getFullYear() - sr;
      }
    },
    mounted() {
      setTimeout(() => {
        this.code = 0;
      }, 1000);
    },
    methods: {
      openImg(){
        this.$refs.upimg.click();
      },
      imgChange(){
        let file = this.$refs.upimg.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
          document.getElementById('upload').innerHTML = '<img src="' + e.target.result + '" alt="" style="height: 100%;width: 100%;"/>';
        }
      },
      //选项选择窗
      selItem(title, field) {
        this.ep.actionsheet({
          title: title,
          items: this.selData[field]
        }).then(res => {
          this.vue.set(this.data, field, res.code);
          this.vue.set(this.data, field + "Str", res.item);
        });
      },
      saveAll(){
        if (!this.data.cellphone) {
          this.$toast({
            message: "请填写联系电话",
            duration: 3000
          });
          return false;
        }
        if (!this.utils.isPhone(this.data.cellphone)) {
          this.$toast({
            message: "请填写正确格式联系电话",
            duration: 3000
          });
          return false;
        }
        if (!this.data.aae010) {
          this.$toast({
            message: "请填写联系地址",
            duration: 3000
          });
          return false;
        }
        if (!this.data.lkfs) {
          this.$toast({
            message: "请选择领卡方式",
            duration: 3000
          });
          return false;
        }
        if (this.data.lkfs == 1) {
          if (!this.data.fkwd) {
            this.$toast({
              message: "请选择发卡网点",
              duration: 3000
            });
            return false;
          }
        } else {
          if (!this.data.aac0031) {
            this.$toast({
              message: "请填写收件人姓名",
              duration: 3000
            });
            return false;
          }
          if (!this.data.cellphone1) {
            this.$toast({
              message: "请填写收件人电话",
              duration: 3000
            });
            return false;
          }
          if (!this.utils.isPhone(this.data.cellphone1)) {
            this.$toast({
              message: "请填写正确格式收件人电话",
              duration: 3000
            });
            return false;
          }
          if (!this.data.aae0101) {
            this.$toast({
              message: "请填写收件人地址",
              duration: 3000
            });
            return false;
          }
        }
        let file = this.$refs.upimg.files[0];
        if (this.age > 16) {
          if (!file) {
            this.$toast({
              message: "请上传照片",
              duration: 3000
            });
            return false;
          }
//          this.data.photo=file;
        }
        let param = new FormData();
        for(let key in this.data){
          param.append(key, this.data[key]);
        }
        if(file){
          param.append("photo", file);
        }
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };
        this.$http.post("/social-card/apply",param,config).then(res => {
          console.log(res);
//          if(res.success){
//          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .ul_info {
    background: #ffffff;
    border-bottom: 0.01rem solid #DFDFDF;
    padding-left: 4%;
    margin-bottom: 0.1rem;
    li {
      padding: 0.14rem 0.15rem 0.14rem 0;
      overflow: hidden;
      .span_color {
        color: #888888;
      }
      label {
        float: right;
        color: #333333;
        max-width: 70%;
      }
      input {
        width: 70%;
        float: right;
        text-align: right;
        border: none;
        outline: none;
      }
      .in_select {
        box-sizing: border-box;
        padding-right: 0.15rem;
        background: url("../../assets/arrow_go.png") no-repeat right center;
        background-size: 0.09rem 0.15rem;
      }
    }
    li:not(:last-child) {
      border-bottom: 0.01rem solid #DFDFDF;
    }
  }

  .photo {
    background: #FFFFFF;
    border-top: 0.01rem solid #DFDFDF;
    border-bottom: 0.01rem solid #DFDFDF;
    margin-bottom: 0.95rem;
    p {
      line-height: 0.44rem;
      border-bottom: 0.01rem solid #DFDFDF;
      padding-left: 4%;
    }
    i {
      display: block;
      width: 0.57rem;
      height: 0.57rem;
      margin: 0.2rem 0 0 0.18rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    div {
      font-size: 0.11rem;
      color: #999999;
      padding: 0.18rem;
    }
  }

  .btn_sub {
    width: 100%;
    line-height: 0.45rem;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #498EE9;
    border: 0.01rem solid #D5D5D5;
    font-size: 0.18rem;
    color: #FFFFFF;
    text-align: center;
  }

  .success {
    text-align: center;
    i {
      display: block;
      width: 0.8rem;
      height: 0.8rem;
      margin: 0.6rem auto 0.15rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    label {
      display: block;
      font-size: 0.15rem;
      color: #353535;
      text-align: center;
      margin-bottom: 0.4rem;
    }
    span {
      display: block;
      width: 90%;
      line-height: 0.45rem;
      margin: 0 auto;
      background: #498EE9;
      border: 0.01rem solid #D5D5D5;
      border-radius: 0.06rem;
      font-size: 0.18rem;
      color: #FFFFFF;
    }
  }
</style>
